<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>

<div id="app">
    <h4>{{ msg }}</h4>
    <div id="app2">
        {{ msgs }}
    </div>
</div>
<div id="app1">
    <h4>{{ msg }}</h4>
</div>
<script type="text/javascript">
var app = new Vue({
    el:'#app',
    data:{
        msg:'多个挂载点'
    }
});
var app = new Vue({
    el:'#app1',
    data:{
        msg:'第一个挂载点'
    }
});
var app = new Vue({
    el:'#app2',
    data:{
        msgs:'第二个挂载点'
    }
});
</script>




<!-- <h4>最简单的挂载模式</h4>
<div id="myApp">
{{message}}
{{retunDetail()}}
</div>
<h4>JSON挂在模式</h4>
<div id="myAppTwo">
{{message}}
</div> -->
<script type="text/javascript">
// // 第一种：内部 json
// var myApp = new Vue({ // 这个v 还必须是大写
//     el:"#myApp",
//     data:{
//         message:'hello world!'
//     },
//     methods:{
//         retunDetail:function(){
//             return "不错";
//         }
//     }
// });
// var oJson = {el:"#myAppTwo",data:{message:'myAppTwo'}};
// // 第二种：外部 json
// var myAppTwojson = {};
// myAppTwojson.el = "#myAppTwo";
// myAppTwojson.data = {message:'myApptwo'}; 
// var myAppTwo = new Vue(myAppTwojson);
// </script>
</body>
</html>